import { createContext, useContext } from 'react'

// 1. 创建上下文
const MsgContext = createContext()

function C() {
	// 3. 使用上下文
	const msg = useContext(MsgContext)

	return (
		<>
			<h2>孙组件</h2>
			<p>顶层组件传递的数据：{msg}</p>
		</>
	)
}

function B() {
	// 3. 使用上下文
	const msg = useContext(MsgContext)

	return (
		<>
			<h2>子组件</h2>
			<p>顶层组件传递的数据：{msg}</p>
			<hr />
			<C />
		</>
	)
}

function A() {
	const msg = 'this is a message'

	return (
		<>
			{/* 2. 包裹顶层组件 */}
			<MsgContext.Provider value={msg}>
				<h2>父组件</h2>
				<hr />
				<B />
			</MsgContext.Provider>
		</>
	)
}

export default A
